<template>
    <div>
        <div class="connerBox">
            <i class="leftTop connerIcon"></i>
            <i class="rightTop connerIcon"></i>
            <i class="rightBottom connerIcon"></i>
            <i class="leftBottom connerIcon"></i>
            <slot></slot>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {}
        }
    }
</script>

<style scoped>
    .connerBox{
        min-width:50px;
        min-height:50px;
        position:relative;
        border:2px solid #EEC0A8;
        background-color: white;
    }
    .connerIcon{
        position:absolute;
        width:25px;
        height:25px;
        background-image: url("../assets/img/jsszy/cornor01@3x.png");
    }
    .leftTop{
        top:0;
        left:0;
    }
    .rightTop{
        top:0;
        right:0;
        transform:rotate(90deg);
        -webkit-transform:rotate(90deg);
    }
    .rightBottom{
        right:0;
        bottom:0;
        transform:rotate(180deg);
        -webkit-transform:rotate(180deg);
    }
    .leftBottom{
        left:0;
        bottom:0;
        transform:rotate(270deg);
        -webkit-transform:rotate(270deg);
    }
</style>
